<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>resume</title>
    <!-- <link rel="stylesheet" href="./loading.css"> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <link rel="stylesheet" href="./css/x.css">

</head>

<body>
    <!--加载动画-->
    <!-- <div id="siteWelcome" class="site-welcome active">
        <div class="loading"></div>
    </div> -->
    <div id="TopNavBar" class="TopNavBar slideDown offset">
        <div id="inner" class="inner clearfix">
            <a class="logo">
                <span class="rs">RS</span>
                <span class="card">card</span>
            </a>
            <nav class="menu">
                <ul class="clearfix">
                    <li>
                        <a href="#siteAbout">关于我</a>
                    </li>
                    <li>
                        <a href="#siteSkills">技能介绍</a>
                    </li>
                    <li>
                        <a href="#sitePortfolio">作品</a>
                    </li>
                    <li>
                        <a href="#message">留言板</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="banner">
        <div class="mask"></div>
    </div>
    <main id="siteAbout" class="slideUp offset" highLight>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiangxia"></use>
        </svg>
        <div class="usercard">
            <div class="selfieAndintro clearfix">
                <div class="selfie">
                    <img src="https://i.loli.net/2019/03/19/5c908af7336a3.png" alt="selfie">
                </div>
                <div class="intro">
                    <span class="hello">Hello
                        <span class="triangle"></span>
                    </span>
                    <h1 style="margin-top:20px;margin-bottom:16px;color: rgb(60, 67, 79);">余银海</h1>
                    <p style="color: rgb(60, 67, 79);">应聘前端工程师</span>
                        <hr>

                    <div class="information">
                        <ul>
                            <li>年龄：22</li>
                            <li>邮箱：591985864@qq.com</li>
                            <li>微信（QQ）：591985864</li>
                        </ul>
                        <ul>
                            <li>教育经历：北京科技大学 211</li>
                            <li>专业：通信工程</li>
                            <li>英语等级：CET-4 CET-6</li>
                        </ul>
                    </div>
                </div>
            </div>
            <footer class="media">
                <a href="https://www.jianshu.com/u/b4375b2e781c" target="_blank">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanzheng-jianshu-copy"></use>
                    </svg>
                </a>
                <a href="https://github.com/yyhsz" target="_black">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-git"></use>
                    </svg>
                </a>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rss"></use>
                    </svg>
                </a>
            </footer>
        </div>
        <div class="download">
            <a href="./前端工程师-余银海-北京科技大学.pdf" target="_blank" download='前端工程师-余银海-北京科技大学'>下载PDF版简历</a>
        </div>
    </main>
    <section class="skill slideUp offset" id="siteSkills" highLight>
        <h2>个人技能</h2>
        <ol>
            <div class="skillcard clearfix">
                <li>HTML5 &amp; CSS3 &amp; JavaScript
                    <div class="meter  offset">
                        <span style="width: 60%"></span>
                    </div>
                </li>
                <li>jQuery、移动端开发
                    <div class="meter  offset">
                        <span style="width: 40%"></span>
                    </div>
                </li>
                <li>Vue
                    <div class="meter  offset">
                        <span style="width: 30%"></span>
                    </div>
                </li>
                <li>其他
                    <div class="meter  offset">
                        <span style="width: 40%"></span>
                    </div>
                </li>
            </div>
        </ol>
    </section>
    <section class="portfolio offset slideUp" id="sitePortfolio" highLight>
        <h2>作品集</h2>
        <!--作品展示框的上方提示栏-->
        <!-- <nav>
            <ol class="clearfix">
                <li id="portfolio1">所有</li>
                <li id="portfolio2">框架</li>
                <li id="portfolio3">原生Js&amp;CSS</li>
            </ol>
            <div id="portfoliobar" class="bar state-1">
                <div class="bar-inner"></div>
            </div>
        </nav>
        <script>
            portfolio1.onclick = function () {
                portfoliobar.className = 'bar state-1'
            }
            portfolio2.onclick = function () {
                portfoliobar.className = 'bar state-2'
            }
            portfolio3.onclick = function () {
                portfoliobar.className = 'bar state-3'
            }

        </script> -->

        <!--轮播-->
        <div id="swiper">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <!-- <img src="./works/canvas.jpg" class="swiper-slide">
                    <img src="./works/nav-page.jpg" class="swiper-slide">
                    <img src="./works/slider.jpg" class="swiper-slide"> -->
                    <div class="works swiper-slide">
                        <div>
                            <h3>仿蘑菇街商城</h3>
                            <h4>项目描述:</h4>
                            <ol>
                                <li>使用VueCli、VueRouter、Vuex进行开发</li>
                                <li>使用axios调用接口</li>
                                <li>项目实现了浏览商品详情，加入购物车等功能</li>
                                <li>使用better-scroll实现滚动</li>
                                <li><a href="https://github.com/yyhsz/market" target="_blank">项目源码</a></li>
                                <li>项目预览二维码：</li>
                                <img src="./img/market.png" alt="">
                            </ol>
                        </div><img src="./img/preview1.png" alt="">
                    </div>
                    <div class="works swiper-slide">
                        <div>
                            <h3>哔哩哔哩UI</h3>
                            <h4>项目描述:</h4>
                            <ol>
                                <li>使用Vue3 、TypeScript、vite开发的一款UI组件库</li>
                                <li>该UI目前包含了Button组件、Switch组件、Dialog组件等</li>
                                <li>通过开发本项目，掌握了Vue3基本用法和TypeScrip基本语法</li>
                                <li><a href="https://yyhsz.github.io/bili-ui-doc/index.html" target="_blank">预览链接</a></li>
                                <li><a href="https://github.com/yyhsz/bilibili-ui" target="_blank">项目源码</a></li>
                            </ol>
                        </div><img src="./img/preview2.png" alt="">
                    </div>
                    <div class="works swiper-slide">
                        <img src="./img/preview3.png" alt=""><img src="./img/preview4.png" alt="">
                    </div>
                    <div class="works swiper-slide">
                        <div>
                            <h3>原生JS+jQuery实现bilibili首页</h3>
                            <h4>项目描述:</h4>
                            <ol>
                                <li>使用了媒体查询处理首页的banner</li>
                                <li>实现弹幕的跑马灯效果</li>
                                <li>实现鼠标悬停预览视频效果</li>
                                <li>使用swiper.js实现轮播图</li>
                                <li><a href="https://yyhsz.github.io/bilbil/src/" target="_blank">预览链接</a></li>
                                <li><a href="https://github.com/yyhsz/bilbil" target="_blank">项目源码</a></li>
                            </ol>
                        </div>
                    </div>
                    <div class="works bili  swiper-slide">
                        <img src="./img/preview5.png" alt="">
                    </div>
                    <div class="works swiper-slide">
                        <div>
                            <h3>原生JS实现可调速的“制作哆啦A梦”过程动画</h3>
                            <h4>项目描述:</h4>
                            <ol>
                                <li>原生JS 配合CSS3动画效果实现制作一个哆啦A梦的全过程</li>
                                <li>用 flex布局 和简单css适配移动端不同尺寸大小的屏幕</li>
                                <li>使用setTimeout函数实现动画调速</li>
                                <li>使用 Prism.js 实现代码高亮</li>
                                <li><a href="https://yyhsz.github.io/draw-A-Doraemon/index.html" target="_blank">预览链接</a></li>
                                <li><a href="https://github.com/yyhsz/draw-A-Doraemon" target="_blank">项目源码</a></li>
                            </ol>
                        </div><img src="./img/preview6.png" alt="">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

    </section>
    <section class="message" id='message'>
        <h2>留言板</h2>
        <ol id="messageList">
        </ol>
        <form action="" id="postMessage">
            <label>姓名</label>
            <input type="text" name="name">
            <label>内容</label>
            <input type="text" name="content">
            <input type="submit" value="提交">
        </form>
    </section>
    <script src="//at.alicdn.com/t/font_1090675_nka2w6z7fbr.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.11.1/dist/av-min.js"></script>
    <script src="./js/base/View.js"></script>
    <script src="./js/base/Model.js"></script>
    <script src="./js/base/Controller.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>
    <script src="./js/main.js"></script>
    <script src="./js/skip-insideThePage.js"></script>
    <script src="./js/auto-slide-up.js"></script>
    <script src="./js/sticky-topbar.js"></script>
    <script src="./js/init-swiper.js"></script>
    <script src="./js/message.js"></script>
</body>

</html>